<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DG8_07</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <!-- 自定义样式 -->
    <style>
        body {
            background-image: url(img/user.jpg);
            background-size: cover;
        }
        .user-info {
            margin: 50px auto;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        .user-header {
            background-color: #007bff;
            color: white;
            padding: 20px;
        }
        .user-content {
            padding: 40px;
        }
        .card {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">What's for today ?</a>
            <!-- 导航栏右侧内容 -->
            <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                
                <li class="nav-item">
                    <a class="nav-link" href="restaurant.html">Restaurant</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#" id="logoutBtn">Logout</a>
                </li>
                
            </ul>
        </div>
    </nav>
    

    <!-- 页面内容 -->
<div class="container">
    <!-- 用户信息 -->
    <div class="user-info">
        <!-- 用户头部 -->
        <div class="user-header">
            <h1>User Dashboard</h1>
            <!-- 用户名和其他信息 -->
            <p>Welcome back, <span id="username">User</span>!</p>
            <p>Email: <span id="email">user@example.com</span></p>
            <p>Age: <span id="age">21</span></p>
            <p>Gender: <span id="gender">Male</span></p>
            <!-- 修改用户信息按钮 -->
            <button type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#editUserInfoModal">Edit Profile</button>
        </div>
        <!-- 用户内容 -->
        <div class="user-content">
            <h2>My Dining Experiences</h2>
            <!-- 就餐经历卡片 -->
            <div id="dining-experiences">
                <!-- 这里将动态生成就餐经历卡片 -->
            </div>
            <!-- 添加就餐经历按钮 -->
            <button type="button" class="btn btn-primary mt-3" data-bs-toggle="modal" data-bs-target="#addDiningExperienceModal">Add Dining Experience</button>
        </div>
    </div>
</div>


    <!-- 添加就餐经历模态框 -->
    <div class="modal fade" id="addDiningExperienceModal" tabindex="-1" aria-labelledby="addDiningExperienceModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addDiningExperienceModalLabel">Add Dining Experience</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- 就餐经历表单 -->
                    <form id="addDiningExperienceForm">
                        <div class="mb-3">
                            <label for="inputDate" class="form-label">Date</label>
                            <input type="date" class="form-control" id="inputDate" required>
                        </div>
                        <div class="mb-3">
                            <label for="inputRestaurant" class="form-label">Restaurant</label>
                            <input type="text" class="form-control" id="inputRestaurant" required>
                        </div>
                        <div class="mb-3">
                            <label for="inputRating" class="form-label">Rating</label>
                            <input type="number" class="form-control" id="inputRating" min="1" max="5" required>
                        </div>
                        <div class="mb-3">
                            <label for="inputReview" class="form-label">Review</label>
                            <textarea class="form-control" id="inputReview" rows="3" required></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </div>




<!-- 修改用户信息模态框 -->
<div class="modal fade" id="editUserInfoModal" tabindex="-1" aria-labelledby="editUserInfoModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editUserInfoModalLabel">Edit Profile</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- 修改用户信息表单 -->
                <form id="editUserInfoForm">
                    <div class="mb-3">
                        <label for="inputNewUsername" class="form-label">New Username</label>
                        <input type="text" class="form-control" id="inputNewUsername" required>
                    </div>
                    <div class="mb-3">
                        <label for="inputNewEmail" class="form-label">New Email</label>
                        <input type="email" class="form-control" id="inputNewEmail" required>
                    </div>
                    <div class="mb-3">
                        <label for="inputNewAge" class="form-label">New Age</label>
                        <input type="number" class="form-control" id="inputNewAge" min="18" required>
                    </div>
                    <div class="mb-3">
                        <label for="inputNewGender" class="form-label">New Gender</label>
                        <select class="form-select" id="inputNewGender" required>
                            <option value="Male">Male</option>
                            <option value="Female">Female</option>
                            <option value="Other">Other</option>
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary">Save Changes</button>
                </form>
            </div>
        </div>
    </div>
</div>


    <!-- JavaScript代码 -->
    <script src="main.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous">
</script>
</body>
</html>
